<template>
	<view v-if="showCamera" class="camera-box">
		<camera :device-position="cameraDirection" :flash="flashText" style="width: 100%; height: 100vh" @error="error">
			<!-- 图片控件 -->
			<block class="imgViewBox" v-if="tempImagePath">
				<cover-image class="image" :src="tempImagePath" />
				<cover-view class="btn-group flex_between check-box">
					<cover-view @click="tempImagePath = ''">
						<cover-image class="icon" src="@/static/images/camera/cancel.png" />
					</cover-view>
					<cover-view @click="upload">
						<cover-image class="icon" src="@/static/images/camera/checked.png" />
					</cover-view>
				</cover-view>
			</block>
			<!-- 相机控件 -->
			<block v-else>
				<cover-view class="btn-group flex_center">
					<cover-view v-if="flOpen" class="albumLeft">
						<cover-image @click="flClick" v-if="flState" class="albumLeft_img"
							src="@/static/images/camera/flOpen.png" />
						<cover-image @click="flClick" v-else class="albumLeft_img"
							src="@/static/images/camera/flClose.png" />
						<cover-view>手电筒</cover-view>
					</cover-view>
					<cover-view class="take-photos" @click="takePhoto">
						<cover-image class="take-photos_img" src="@/static/images/camera/beat.png" />
						<cover-view>拍照</cover-view>
					</cover-view>
					<cover-view class="albumRight" v-if="false" @click="chooseImage">
						<cover-image class="albumRight_img"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/album.png" />
						<cover-view>相册</cover-view>
					</cover-view>
					<cover-view class="albumRight" @click="cameraDirectionClick">
						<cover-image class="albumRight_img" src="@/static/images/camera/cameraDirection.png" />
						<cover-view>切换</cover-view>
					</cover-view>
				</cover-view>
			</block>
		</camera>
		<!-- 组件区 -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				showCamera: false, // 相机显/隐
				tempImagePath: '', // 图片url
				statusBarHeight: 44,
				flOpen: true, // 闪光灯整体是否显/隐
				flashText: 'off', // 闪光灯开关显/隐
				flState: false, // 闪光灯状态显/隐
				cameraDirection: 'back', // 相机反转前/后
				maintenanceId: '',
				maintenanceBuildingId: '',
				attachs: []
			}
		},
		onLoad(options) {
			// console.log('前边页面传过来的参数---', JSON.parse(options.params))
			this.getInitiaCamera() // 相机初始化
			const params = JSON.parse(options.params)
			this.maintenanceId = params.maintenanceId
			this.maintenanceBuildingId = params.maintenanceBuildingId
			this.attachs = params.attachs
		},
		onShow() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10
		},
		computed: {
			...mapState({
				userInfo: modules => modules.infoList.userInfo
			})
		},
		methods: {
			// 初始化相机
			getInitiaCamera() {
				let that = this
				that.showCamera = false
				uni.showLoading({
					mask: true,
					title: '相机初始化···'
				})
				setTimeout(() => {
					uni.hideLoading()
					that.showCamera = true
				}, 100)
			},
			// 打开闪光灯
			flClick() {
				if (this.flState) {
					this.flashText = 'off'
					this.flState = false
				} else {
					this.flashText = 'torch' // 打开手电筒
					this.flState = true
				}
			},
			// 相机前后摄像头切换
			cameraDirectionClick() {
				// console.log('切换摄像头', )
				if (this.cameraDirection == 'front') {
					this.cameraDirection = 'back'
					this.flOpen = true
				} else {
					this.cameraDirection = 'front'
					this.flOpen = false
					this.flashText = 'off'
					this.flState = false
				}
			},
			// 获取摄像头授权
			// getPermission() {
			// 	getPermission({
			// 		permission: 'camera',
			// 		permissionName: '摄像头',
			// 		success: () => {
			// 			this.showCamera = true
			// 		},
			// 		cancel: () => {
			// 			this.back()
			// 		}
			// 	})
			// },

			// 打开相册
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'], // 只能从相册选图片
					success: (res) => {
						this.tempImagePath = res.tempFilePaths[0]
					}
				})
			},
			// 拍照
			takePhoto() {
				let that = this
				const ctx = uni.createCameraContext()
				ctx.takePhoto({
					success: (res) => {
						that.flState = false
						that.tempImagePath = res.tempImagePath
					}
				})
			},
			// 上传图片
			upload() {
				let that = this;
				// that.$refs.loading.openLoading('上传中···'); // 打开loading动画
				uni.showLoading({
					mask: true,
					title: '上传中，请稍后'
				})
				that.$uploadImg.uploadImgOSS(that.tempImagePath, 8).then(res => {
					if (res) {
						let imgs = {
							id: '',
							attachUrl: res,
							creater: that.userInfo.id
						}
						that.attachs.push(imgs);
						// console.log(that.attachs)
						// 更新照片给后台
						let params = {
							maintenanceId: that.maintenanceId,
							maintenanceBuildingId: that.maintenanceBuildingId,
							attachList: that.attachs
						};
						that.$http
							.post({
								url: '/maintenance/updTestAttach', // 更新测试条图片
								data: params
							})
							.then(res => {
								uni.hideLoading()
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										title: '上传成功'
									})
									setTimeout(() => {
										that.back()
									}, 1500)
									// 图片保存到本地（用户想把拍的照片保存到本地）
									uni.saveImageToPhotosAlbum({
										filePath: res,
										success: function() {},
										fail() {
											this.$showModal('您拒绝了图片保存到系统相册')
										}
									});
								} else {
									uni.showToast({
										icon: 'error',
										title: '上传失败'
									})
								}
							});
					} else {
						that.$showModal('上传照片失败，请重新上传！');
					}
				});
				// 保存图片到本地
				uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
					filePath: that.tempImagePath, //图片文件路径
					success: () => {
						uni.showToast({
							title: '图片保存成功',
							icon: 'none',
						});
					},
					fail: () => {
						uni.showToast({
							title: '图片保存失败',
							icon: 'none',
						});
					}
				});
			},
			// 返回上一页
			back() {
				uni.navigateBack()
			},
			// 相机初始化失败返回
			error(e) {
				console.error('相机初始化失败', e)
				this.$showModal('相机打开失败')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.camera-box {
		width: 100%;
		height: 100vh;
		text-align: center;
		color: white;
		position: fixed;
		background: url('https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/cameraBg.png') no-repeat;
		background-size: cover;

		.imgViewBox {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			z-index: 9;
		}

		.image {
			width: 100%;
			height: 100%;
		}

		.btn-group {
			width: 100%;
			z-index: 999;
			position: fixed;
			bottom: 110rpx;

			.take-photos {
				font-size: 24rpx;
				font-weight: 400;

				&_img {
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 30rpx;
				}
			}

			.albumLeft {
				position: absolute;
				bottom: 0rpx;
				left: 80rpx;
				font-size: 24rpx;
				font-weight: 400;

				&_img {
					width: 83rpx;
					height: 83rpx;
					margin: 0 0 30rpx 15rpx;
				}
			}

			.albumRight {
				position: absolute;
				bottom: 0rpx;
				right: 80rpx;
				font-size: 24rpx;
				font-weight: 400;

				&_img {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 30rpx;
				}
			}

			&.check-box {
				padding: 0 110rpx;
				box-sizing: border-box;

				.icon {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}

		.flex_center {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.flex_between {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		@keyframes scan {
			0% {
				top: 23vh;
				opacity: 0;
			}

			15% {
				opacity: 1;
			}

			90% {
				opacity: 1;
			}

			100% {
				top: 55.5vh;
				opacity: 0;
			}
		}
	}
</style>